<template>
	<view class="shouzhi-container">
		<!-- 蓝色头部区域 -->
		<view class="blue-header">
			<view class="header-content">
				<view class="back-btn" @click="goBack">
					<uni-icons type="left" size="20" color="#fff"></uni-icons>
				</view>
				<text class="header-title">收支明细</text>
				<view class="header-right">
					<view class="header-right-container">
						<view class="header-icon">
							<text>⋯</text>
						</view>
						<view class="header-icon active">
							<view class="target-icon"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 余额信息 -->
			<view class="balance-section">
				<view class="balance-main">
					<text class="balance-amount">1500</text>
					<text class="balance-label">当前现金余额 (元)</text>
					<button class="withdraw-btn" @click="goToWithdraw">提现</button>
				</view>
				<view class="balance-stats">
					<text class="stat-item">累计收入 (元) : 1700元</text>
					<text class="stat-item">累计提现 (元) : 200元</text>
				</view>
			</view>
		</view>
		
		<!-- 明细列表 -->
		<scroll-view class="content-scroll" scroll-y>
			<view class="detail-section">
				<text class="section-title">收支明细</text>
				<view class="detail-item" v-for="(item, index) in details" :key="index">
					<view class="detail-left">
						<text class="detail-desc">{{ item.desc }}</text>
						<text class="detail-time">{{ item.time }}</text>
					</view>
					<text class="detail-amount" :class="{ negative: item.type === 'withdraw' }">{{ item.amount }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: [
					{
						desc: 'XX车辆清洗、抛光打蜡服务',
						time: '核销时间:2022-10-12 11:09',
						amount: '+ 50.00',
						type: 'income'
					},
					{
						desc: '提现',
						time: '提现时间:2022-10-12 11:09',
						amount: '+ 200.00',
						type: 'withdraw'
					},
					{
						desc: 'XX车辆清洗、抛光打蜡服务',
						time: '核销时间:2022-10-12 11:09',
						amount: '+ 50.00',
						type: 'income'
					},
					{
						desc: 'XX车辆清洗、抛光打蜡服务',
						time: '核销时间:2022-10-12 11:09',
						amount: '+ 50.00',
						type: 'income'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			goToWithdraw() {
				uni.navigateTo({
					url: '/pages/tixian/tixian'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shouzhi-container {
		width: 100%;
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}
	
	.blue-header {
		background: #007aff;
		padding-top: var(--status-bar-height, 44px);
		padding-bottom: 40rpx;
	}
	
	.header-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		position: relative;
		margin-bottom: 40rpx;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.header-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	
	.header-right {
		display: flex;
		align-items: center;
	}
	
	.header-right-container {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 40rpx;
		padding: 8rpx 12rpx;
		gap: 8rpx;
	}
	
	.header-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: transparent;
		
		text {
			color: #fff;
			font-size: 32rpx;
			line-height: 1;
		}
		
		&.active {
			background: rgba(255, 255, 255, 0.3);
		}
	}
	
	.target-icon {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 8rpx;
			height: 8rpx;
			background: #fff;
			border-radius: 50%;
		}
	}
	
	.balance-section {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.balance-main {
		display: flex;
		flex-direction: column;
	}
	
	.balance-amount {
		font-size: 72rpx;
		font-weight: 500;
		color: #fff;
		margin-bottom: 10rpx;
	}
	
	.balance-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		margin-bottom: 20rpx;
	}
	
	.withdraw-btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #ff9500;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 26rpx;
		
		&::after {
			border: none;
		}
	}
	
	.balance-stats {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	.stat-item {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 10rpx;
	}
	
	.content-scroll {
		flex: 1;
		overflow-y: auto;
		background: #fff;
		margin-top: -20rpx;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}
	
	.detail-section {
		padding: 0 30rpx 40rpx 30rpx;
	}
	
	.section-title {
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
	}
	
	.detail-left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.detail-desc {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.detail-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.detail-amount {
		font-size: 32rpx;
		font-weight: 500;
		color: #ff3b30;
		
		&.negative {
			color: #333;
		}
	}
</style>

